<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
		<title>个人博客</title>
	</head>
	<body>
		<noscript>
			<strong
				>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
				properly without JavaScript enabled. Please enable it to
				continue.</strong
			>
		</noscript>
		<div id="app">
			<!-- 初始加载动画 -->
			<style>
				.loading {
					position: absolute;

					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				.dot {
					width: 8px;
					height: 20px;
					margin: 5px;
					display: inline-block;
					background: lightgreen;
					border-radius: 5px;
					animation: test 0.5s ease-in-out infinite alternate;
				}
				.dot:nth-child(2) {
					animation-delay: 0.2s;
				}
				.dot:nth-child(3) {
					animation-delay: 0.4s;
				}
				.dot:nth-child(4) {
					animation-delay: 0.6s;
				}
				.dot:nth-child(5) {
					animation-delay: 0.8s;
				}

				@keyframes test {
					100% {
						background: aqua;
						transform: scaleY(1.7);
					}
				}
			</style>
			<div class="loading">
				<div class="dot dot1"></div>
				<div class="dot dot2"></div>
				<div class="dot dot3"></div>
				<div class="dot dot4"></div>
				<div class="dot dot5"></div>
			</div>
		</div>
		<% if(NODE_ENV === 'production') { %>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.7/vue-router.min.js"></script>
		<% }%>
		<!-- built files will be auto injected -->
	</body>
</html>
